AngularJs 学习笔记（七）

---

AngularJs 执行流程

1.$watch

• 用来监听$scope身上某一个属性的变化
• 一旦属性变化，就会执行$watch当中的回调方法
• 会把对应的新值与老值传递进来
• 它是内部自己默认执行的
• 默认是不能监听一个对象，只能监听一个属性，例：‘name’；若真想要监听一个对象，则在后面加上参数true

$scope.$watch('name',function (newV,oldV) {
         console.log('new='+newV);
         console.log('old='+oldV);
});



$scope.$watch('pre',function (newV,oldV) {
         console.log('new='+newV);
         console.log('old='+oldV);
}，true);

那么如何取消一个$watch？

• 在使用$watch时会有一个返回值。这个返回值是一个方法,只要执行了此方法，就自动停止监听。

var count = 4;
var unWatch = $scope.$watch('per',function (newV,oldV) {
        count--;
        if (count == 0){
            unWatch(); //就会自动取消监听。
        }
        console.log('new='+newV);
        console.log('old='+oldV);
    },true);

2.脏值检测

在进行整个执行流程中，会把$scope上绑定的所有元素都放到一个$scope组中，另外绑定在html页面上的属性都放在一个watchList数组中，里面存放都是绑定在html页上的属性。数组当中的每一个元素都会有一个$watch来监听

当发生一个事件时，会触发一个$digest循环。会去遍历watchList，去询问里面的每一个属性，有没有发生改变。如果有发生变化，把变化的值告诉$digest。

所有遍历完毕之后，再去到$scope当中查看有没有新增的属性，如果没有，就结束循环；如果有，就再回来继续遍历watchList（新增的值有没有在页面当中显示），如果有，就记录下来新增值是多少。最后，还会再去遍历$scope，去询问有没有新增的属性，如果没有了，就结束整个循环。这整个过程最起码会遍历两次。当然，整个循环也不是一直执行的。当执行到10次，会自动退出。调用$apply可强制刷新界面。

以上整个过程就称为脏值检测机制。

3.$apply

有一些网络延迟的数据，是没有办法脏值检测到的。我们就得自己手动去刷新。

setInterval(function () {
    $scope.curDate = new Date();
    $scope.$apply(); //强制刷新界面显示数据
},1000);

---

• << 上一篇
• 下一篇 >>